<template>
  <div class="my-container w-full h-full px-6">
    <div class="header w-full">
      <a-form-model class="w-full flex flex-col"  :model="form" ref="form" v-bind="layout" labelAlign="right" >
        <div class="dis-flex line-h-sele">
          <div class="dis-flex">
            <div class="dis-flex ali-c">姓名：</div>
            <div class="dis-flex ali-c flex-1">
              <!-- <a-input v-model="form.name" placeholder="姓名"></a-input> -->
                  <a-select v-model="form.member_id"  placeholder="团员" >
           <a-select-option
          v-for="item in dataList"
          :value="item.id"
          :key="item.id"
          >{{ item.name }}</a-select-option
        >
        </a-select>
            </div>
          </div>
          <div class="dis-flex">
            <div class="dis-flex ali-c">状态：</div>
            <div class="dis-flex ali-c flex-1">
              <a-select v-model="form.status"  placeholder="状态" > 
                <a-select-option :value="0">
                  未提交
                </a-select-option>
                <a-select-option :value="1">
                  已提交
                </a-select-option>
                <a-select-option :value="2">
                  通过
                </a-select-option>
                <a-select-option :value="3">
                  驳回
                </a-select-option>
              </a-select>
            </div>
          </div>
          <div class="dis-flex">
            <div class="dis-flex ali-c">职位：</div>
            <div class="dis-flex ali-c flex-1">
              <a-select v-model="form.type"  placeholder="职位" >
                <a-select-option :value="1">
                  书记 
                </a-select-option>
                <a-select-option :value="2">
                  副书记
                </a-select-option>
                <a-select-option :value="3">
                  组织委员
                </a-select-option>
                <a-select-option :value="4">
                  宣传委员
                </a-select-option>
              </a-select>
            </div>
          </div>
          <div class="flex justify-end items-center text-right">
            <a-button class="button-item mr-4" @click="reset">清空</a-button>
            <a-button class="button-item " type="primary" @click="search(1, 10)">搜索</a-button>
          </div>
        </div>
      </a-form-model>
    </div>
    <a-divider dashed />
    <div class="content">
    
      <div class="btn-group">
        <a-button  type="dashed" @click="add">
          <a-icon type="plus" />
          添加
        </a-button>
        <a-popconfirm
          title="确定要删除选中记录么?"
          ok-text="删除"
          cancel-text="取消"
          @confirm="remove"
          @cancel="cancel"
        >
          <a-button>
            <a-icon type="delete" />
            删除
          </a-button>
        </a-popconfirm>
      </div>
      <a-table :columns="columns" 
        :data-source="data" 
        rowKey="id" 
        :pagination="false"
        :row-selection="{ onChange: onSelectChange }">
        <template slot="type" slot-scope="text, record">
          <span v-if="record.type == 1">书记</span>
          <span v-else-if="record.type == 2">副书记</span>
          <span v-else-if="record.type == 3">组织委员</span>
          <span v-else-if="record.type == 4">宣传委员</span>
          <span v-else>--</span>
        </template>
        <template slot="state" slot-scope="text, record">
          <span v-if="record.state == 1">通过</span>
          <span v-else>未通过</span>
        </template>
        <template slot="status" slot-scope="text, record">
          <span v-if="record.status == 1"><div class="status-1" />已提交</span>
          <span v-else-if="record.status == 2"><div class="status-2" />通过</span>
          <span v-else-if="record.status == 3"><div class="status-3" />驳回</span>
          <span v-else-if="record.status == 0"><div class="status-0" />未提交</span>
          <span v-else>--</span>
        </template>
        <template slot="operation" slot-scope="text, record">
          <div class="flex">
            <a-popconfirm
              title="确定提交么?"
              ok-text="提交"
              cancel-text="取消"
              @confirm="status(record, 1)"
              @cancel="cancel"
            >
              <a-button v-if="record.status == 0 || record.status == 3 || record.status == 9"  type="link" style="color: rgba(0, 0, 0, 0.65);">
                提交
              </a-button>
            </a-popconfirm>
            <a-divider type="vertical"  v-if="record.status == 0 || record.status == 3 || record.status == 9" /> 
            <a-button @click="edit(record)" type="link" style="color: rgba(0, 0, 0, 0.65);" v-if="record.status == 0 || record.status == 3">
              编辑
            </a-button>
            <a-divider type="vertical"  v-if="record.status == 0 || record.status == 3"/>
              <a-popconfirm
              title="确定要删除选中记录么?"
              ok-text="删除"
              cancel-text="取消"
              @confirm="slotDelete(record)"
              @cancel="cancel"
            >
          <a-button type="link" style="color: rgba(0, 0, 0, 0.65);"
          >删除</a-button>
           </a-popconfirm>
          </div>
        </template>
      </a-table>
      <a-row>
        <a-col :span="24" class=" text-right mt-8">
          <a-pagination
            show-quick-jumper
            show-size-changer
            :show-total="pagination.showTotal"
            size="small"
            v-model="pagination.current"
            :default-current="pagination.current"
            :total="pagination.total"
            show-less-items
            @change="search"
            @showSizeChange="onShowSizeChange"
          />
        </a-col>
      </a-row>
    </div>
    <a-modal
      title="选举信息"
      v-if="visible"
      :visible="visible"
      width="640px"
      height="672px"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :destroyOnClose="true"
    >
      <Form ref="record" :form="record" @pass="pass" @reject="reject" />
    </a-modal>
  </div>
</template>

<script>
import Form from "../Form"
export default {
  name: "List",
  components: {Form},
  data() {
    return {
      dataList:[],
      form: {},
      record: {},
      data: [],
      selectedRowKeys: [],
      pagination: {
        defaultPageSize: 10,
        showTotal: (total) => `总 ${total} 条`,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        current: 1,
        size: 10,
        total: 0,
      },
      visible: false,
      confirmLoading: false,
      columns: [
        {
          title: "团员",
          dataIndex: "name",
        },
        {
          title: "职位",
          dataIndex: "type",
          scopedSlots: { customRender: 'type' },

        },
        {
          title: "组织机构",
          dataIndex: "orgName",
        },
        {
          title: "候选人名单",
          dataIndex: "names",
        },
        {
          title: "得票数",
          dataIndex: "note",
        },
        {
          title: "结果",
          dataIndex: "state",
          scopedSlots: { customRender: "state" },
        },
        {
          title: "状态",
          dataIndex: "status",
          scopedSlots: { customRender: "status" },
        },
        {
          title: "操作",
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
      },
    };
  },
  activated() {
   
  this.searchList()
  },
  methods: {
     searchList() {
      this.$ajax({
        url: this.$api.member.findList,
        data: {},
        success: (result) => {
          this.dataList = result;
           this.search()
        },
      });
    },
    reject() {
      this.confirmLoading = false;
    },
    pass() {
      this.visible = false;
      this.search()
      this.confirmLoading = false;
    },
    handleOk(e) {
      this.confirmLoading = true;
      this.$refs.record.save();
       this.search()
    },
    handleCancel(e) {
      this.visible = false;
    },
    onSelectChange(keys, rows) {
      this.selectedRowKeys = keys
    },
    remove(row) {
      if (this.selectedRowKeys && this.selectedRowKeys.length) {
        this.$ajax({
          url: this.$api.election.deleteByIds,
          data: this.selectedRowKeys,
          success: (result) => {
            this.$message.success("操作成功");
            this.selectedRowKeys = []
            this.reset()
          },
        });
      } else {
        this.$message.warning("请至少选择一条记录");
      }
    },
      onShowSizeChange(current, size) {
      this.pagination.size = size;
      this.search();
    },
    add() {
      this.record = {}
      this.visible = true;
    },
    edit(row) {
      this.record = Object.assign({}, row);
      this.visible = true;
      // this.$router.push({path: `/member/form`, query: row});
    },
    slotDelete (row) {
    this.$ajax({
        url: this.$api.election.deleteByIds,
        data: [row.id],
        success: (result) => {
          this.$message.success("操作成功");
          this.search();
        },
      });
    },
    onChange() {

    },
    search(current, size) {
       var _this= this
      this.$ajax({
        url: this.$api.election.findPage,
        data: Object.assign(
          {
            current: current || this.pagination.current,
            size: size || this.pagination.size,
          },
          this.form,
        ),
        success: (result) => {
           for (let i = 0; i < result.records.length; i++) {
            for (let j = 0; j < _this.dataList.length; j++) {
               if(_this.dataList[j].id==result.records[i].memberId){
                result.records[i].name = _this.dataList[j].name
               }
            }
          }
          this.data = result.records;
          const pager = { ...this.pagination };
          pager.total = result.total;
          pager.current = result.current;
          pager.size = result.size;
          this.pagination = pager;
        },
      });
    },
    cancel() {
      this.$message.warning('您已取消操作');
    },
    reset() {
      this.form = this.$options.data().form;
      this.pagination.current = 1;
      this.pagination.size = 10;
      this.search()
    },
    status(data, val) {
      data.status = val;
      this.$ajax({
        url: this.$api.election.saveOrUpdate,
        data,
        success: (result) => {
          this.$message.success("操作成功");
          this.search();
        },
        fail: (err) => {
          this.$message.success(err);
        },
      });
    },
  }
};
</script>
<style lang="less" scoped>
.my-container{
  .header{
    .ant-form{
      .ant-form-item{
        input{
          // width: 420px;
          height: 40px;
        }
       /deep/ .ant-form-item-label {
         width: 80px !important;
       }
      }
      .button-item{
        height: 40px;
      }
    }
  }
  .ant-divider{
    margin: 8px 0;
  }
  .content{
    display: flex;
    flex-direction: column;
    .ant-btn{
      display: flex;
      align-items: center;
    }
    .ant-table-wrapper{
      margin-top: 16px;
      // /deep/ .ant-table-thead > tr > th {
      //   font-weight: bold !important;
      // }
      /deep/ .ant-table-content{
        .ant-table-body{
          .ant-table-thead{
            tr{
              th{
                font-weight: bold !important;
              }
            }
          }
        }
      }
    }
    /deep/ .ant-pagination-item-link{
      display: flex;
      align-items: center;
    }
  }
  .select-main{
    display: flex;
    justify-content:space-between;
    line-height: 150px;
  }
  .select-d{
    display: flex;
    width: 33.3333%;
    flex-direction: column;
    padding-top: 20px;
  }
  .select-d-r{
    display: flex;
    width: 33.3333%;
    flex-direction: column;
    padding-top: 20px;
    margin-left: 40px;
  }
    .dis-flex {
    display: flex;
    justify-content: space-between;
  }
  .ali-c {
    align-items: center;
  }
  .flex-1 {
    flex: 1;
    margin-left: 8px;
  }
  .line-h-sele {
    height: 60px;
  }
}
</style>